<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../css/comm.css"/>
</head>
<body>
<header>
    <iframe src="header.html" frameborder="0" class="my_header" scrolling="no"></iframe>
</header>
   <div id="app">
        <div class="container">
                <table>
                    <tr >
                        <td class="text-success" colspan="2"><h3>欢迎登录植物交流平台</h3></td>
                    </tr>
                    <tr >
                        <td >用户名：</td>
                        <td><input type="text" class="form-control" placeholder="请输入用户名" v-model="username"/>
                        <span style="font-size: 12px"></span>
                        </td>
                    </tr>
                    <tr >
                        <td>密&nbsp;码：</td>
                        <td><input type="password" class="form-control" placeholder="请输入密码" v-model="password"/>
                        <span style="font-size: 12px"></span>
                        </td>
                    </tr>

                    <tr >
                        <td></td>
                        <td >
                            <button class="btn btn-primary" @click="login">登录</button>
                            <a href="reg.html" class="btn btn-secondary">注册</a>
                        </td>
                    </tr>
                </table>
    </div>
   </div>

</body>
<script>
     new Vue({
        el: "#app",
        data: {
            hello:"hello world",// 没用
            username:"",// 用户名
            password:"",// 密码
            nick_name:""// 昵称
        },
        //网页一进来就调用
        created() {
            // 进入登录的时候清空session
            session.clear()
        },
        // 方法全部写在这
        methods: {
            async login(){
                // 登录的json数据
                const jsonData = {
                    "username":this.username,
                    "password":this.password
                }
                const response = await fetch('http://localhost:5000/user/login',{
                    method: 'POST', // 指定请求方法为POST  
                    headers: {  
                        'Content-Type': 'application/json', // 设置请求头，指定发送的数据类型为JSON  
                    }, 
                    body: JSON.stringify(jsonData), // 将JavaScript对象转换为JSON字符串作为请求体发送
                });
                 // post
                 const data =await response.json()
                // 请求成功
                 if(data.code == 200){
                    console.log("登陆成功")
                    // 存储 session 数据  
                    sessionStorage.setItem('username', data.data[0].nick_name);  // 昵称传入session缓存
                    sessionStorage.setItem('titleImg', data.data[0].title_img); // 头像传入session缓存
                    sessionStorage.setItem('id', data.data[0].id); // 用户ID传入session缓存
                    sessionStorage.setItem('sign', data.data[0].sign); // 签名传入session缓存
                    sessionStorage.setItem('auth', data.data[0].auth); // 权限传入session缓存
                    window.location.href="/html/index.html" // 跳转主页面
                 }else{
                    console.log("登录失败")
                    alert("登录失败，请检查")
                 }
            },
            
            
        },
        
    })
</script>
</html>